<template>
  <h1>循环指令</h1>
  <ul>
<!-- item从1开始,item表示循环次数,item可以自定义,但最好用item-->
<!-- v-for 的效果: 执行9次循环,每次循环都会执行一次v-for指令中的代码-->
    <li v-for="item in 2">{{item}}</li>
    <li v-for="item in mylove">{{item}}</li>
  </ul>

  <table border="2px">

    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>商演</th>
      <th>操作</th>
    </tr>
<!--  循环几次就生成几个tr  -->
<!--  index从0开始  -->
    <tr v-for="(item,index) in mylove">
      <td>{{index+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>
<script setup>
import {ref} from "vue";

const mylove = ref([
    {name:'黄霄雲',price:1000000},
    {name:'孙雪宁',price:10000},
    {name:'李庚希',price:10000},
    {name:'刘浩存',price:100000},
    {name:'欧阳娜娜',price:10000},
    {name:'关晓彤',price:100000},
]);
const del = (i) => {
    if (confirm('是否删除')){
      mylove.value.splice(i,1)
    }
}
</script>
<style scoped>

</style>